<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 列表 盒子 -->
    <!-- 
        有序列表
        ol>li

        数字排序样式由css决定
    -->
    <h4></h4>
    <ol>
        <li>俄罗斯</li>
        <li>加拿大</li>
        <li>中国</li>
    </ol>

    <!-- 
        定义列表
        dl dt dd
        <dl> 表示定义一个自定义列表的大结构
        <dt> 表示定义自定义列表中的一个主题或者术语
        <dd> 定义解释项 表示描述或解释前面的定义主题
        dl内部只能嵌套 dt dd
        dt dd是同级关系    
        dd也可以为0或多项
        dt dd是容器级标签
        缩进等样式由css负责
    -->

    <!-- <dl>
        <dt>主题</dt>
        <dd>解释主题</dd>

        <dt>张三</dt>
        <dd>
            <p>城市：北京</p>
            <p>年龄：30</p>
            <p>学校：清华</p>
        </dd>
        <dt>李四</dt>
        <dd>城市：上海</dd>
        <dd>年龄：40</dd>
    </dl> -->


    <!-- 规范 -->
    <dl>
        <dt>主题</dt>
        <dd>解释主题</dd>
    </dl>

    <dl>
        <dt>张三</dt>
        <dd>
            <p>城市：北京</p>
            <p>年龄：30</p>
            <p>学校：清华</p>
        </dd>
    </dl>

    <dl>
        <dt>李四</dt>
        <dd>城市：上海</dd>
        <dd>年龄：40</dd>
    </dl>

    <!-- 
    列表选择根据项目需求
    -->

    <!-- 布局标签 -->

    <!-- 
    盒子
    div   span
    -->

    <!-- 
    div
    双标签 可以放任意内容
    -->

    <!-- 
    span
    小盒子 容器级 双标签
    局部调整
    -->

</body>
</html>